<!-- eslint-disable vue/no-template-shadow -->
<template>
  <template v-if="isModalDesign">
    <div class="bw-modal-design-container" v-bind="curComProps" v-on="onEvents">
      <span class="bw-modal-design-title"> 弹窗内容设计 </span>

      <div class="bw-modal-design-content">
        <template v-for="item in curComSlotList" :key="item?.slotCode">
          <div
            class="bw-slot-container"
            :nodeId="nodeInfo.nodeId"
            :name="nodeInfo.nodeName"
            :comName="nodeInfo.comName"
            :comType="nodeInfo.comType"
            :soltName="item.slotName"
            :soltCode="item.slotCode"
          >
            <slot :key="item.slotCode" :name="item.slotCode" v-bind="scopeData">
              <div class="bw-design-node-slot-null" ref="noChild">
                <span>拖拽组件到这里</span>
              </div>
            </slot>
          </div>
        </template>
      </div>
    </div>
  </template>

  <template v-else-if="isSpecial">
    <div class="bw-slot-design-container" v-bind="curComProps" v-on="onEvents">
      <span class="bw-slot-design-title"> {{ curComName }} </span>

      <div class="bw-slot-design-content">
        <template v-for="item in curComSlotList" :key="item?.slotCode">
          <div
            class="bw-slot-container"
            :nodeId="nodeInfo.nodeId"
            :name="nodeInfo.nodeName"
            :comName="nodeInfo.comName"
            :comType="nodeInfo.comType"
            :soltName="item.slotName"
            :soltCode="item.slotCode"
          >
            <slot :key="item.slotCode" :name="item.slotCode" v-bind="scopeData">
              <div class="bw-design-node-slot-null" ref="noChild">
                <span>({{ item.slotName }})</span>
                <span>拖拽组件到这里</span>
              </div>
            </slot>
          </div>
        </template>
      </div>
    </div>
  </template>

  <template v-else>
    <component ref="curNode" :is="curEle" v-bind="curComProps" v-on="onEvents">
      <template
        v-for="item in curComSlotList"
        :key="item?.slotCode"
        #[item.slotCode]="scopeData"
      >
        <div
          class="bw-slot-container"
          :nodeId="nodeInfo.nodeId"
          :name="nodeInfo.nodeName"
          :comName="nodeInfo.comName"
          :comType="nodeInfo.comType"
          :soltName="item.slotName"
          :soltCode="item.slotCode"
        >
          <slot :key="item.slotCode" :name="item.slotCode" v-bind="scopeData">
            <div class="bw-design-node-slot-null" ref="noChild">
              <span>拖拽组件到这里</span>
            </div>
          </slot>
        </div>
      </template>
    </component>
  </template>
</template>

<script lang="ts" setup>
import { useDesignEle } from './util'

import type { BwVueIns } from '../../utils/model'
import type {
  BwCustomComStructModel,
  BwCustomComFrontTypeEnum,
} from '@bitwit/base-com-render'

interface BwDesignEleProps {
  vueIns: BwVueIns
  scopeData: Record<string, any>
  nodeInfo: BwCustomComStructModel
  frontType?: BwCustomComFrontTypeEnum
}

const props = withDefaults(defineProps<BwDesignEleProps>(), {})
const {
  curEle,
  curNode,
  onEvents,
  curComProps,
  curComSlotList,

  isModalDesign,
  isSpecial,
  curComName,
} = useDesignEle(props)
</script>

<style lang="less" scoped>
.bw-slot-container {
  padding: 8px;
  min-height: 60px;
  position: relative;
  display: inherit;
  flex-direction: inherit;
  width: calc(100% - 16px);
  height: calc(100% - 16px);

  .bw-design-node-slot-null {
    width: 100%;
    min-height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #f0f0f0 !important;

    span {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}

.bw-design-drag-item {
  margin: 8px 0;
  :deep(input),
  :deep(button),
  :deep(select) {
    pointer-events: none;
  }

  :deep(.bw-design-node-hover),
  :deep(.bw-design-node-select) {
    border-radius: 3px;
    border: 1px solid #0960bd !important;
  }
}

.bw-design-drag-item .ant-input {
  border-color: #d9d9d9;
}

.bw-col-item {
  width: 100%;
}

.bw-design-node-hover,
.bw-design-node-select {
  border-radius: 3px;
  border: 1px solid #0960bd !important;
}

.bw-modal-design-container {
  width: 100%;
  height: auto;
  margin-top: 32px;

  .bw-modal-design-title {
    font-size: 14px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }

  .bw-modal-design-content {
    padding: 8px;
    min-height: 300px;
    border-radius: 4px;
    width: calc(100% - 18px);
    border: 1px solid #e8e8e8;
    background-color: rgba(240, 240, 240, 0.35);

    // & > .bw-slot-container {
    //   min-height: 284px;
    // }
  }
}

.bw-com-node-hide {
  display: none !important;
}
</style>
